ShaderGraph小技 : Rotateを使わない90度回転

はじめに

今回はRotateノードを使わずに90°回転を実装する方法を紹介します。

https://gyazo.com/2e155588495b31b9f738b6760988080a

UVを時計周りに90度回転させる

Rotateノードを使う場合

Rotateノードを使ってUV成分を(0.5, 0.5)を中心として時計回りに90°回転させる場合は、以下のようになります。

https://gyazo.com/6ce19dfc2f68cb2b63c36e230cef703d

Rotateノードを使わない場合

Rotateノードを使わずに90度回転を実装する場合、以下のように設定します。

https://gyazo.com/dcd3d9b0c2af1ae34daf87c7a6acf52f

Vector2の成分を以下のように設定することで、UVを時計回りに90度回転させることができます。

X成分 : 1 - Y

Y成分 : X

解説

STEP1 : 90度回転を行う行列を求める

$ \begin{pmatrix} cos \theta & -sin \theta \\ sin \theta & cos \theta \end{pmatrix}

$ \begin{pmatrix} cos 90 \degree & -sin 90 \degree \\ sin 90 \degree & cos 90 \degree \end{pmatrix} = \begin{pmatrix} 0 & -1 \\ 1 & 0 \end{pmatrix}

$ \begin{pmatrix} 0 & -1 \\ 1 & 0 \end{pmatrix}

STEP2 : 点(0.5, 0.5)の周りに90度回転する

回転行列は点(0, 0)の周りで回転を行うものですが、今回やりたいのは点(0.5, 0.5)の周りの回転です。

上記の操作で点(0.5, 0.5)まわりの回転が実現できます。

計算1. (x, y)から0.5ずつ引く

$ \binom{x}{y} - \binom{0.5}{0.5} = \binom{x - 0.5}{y - 0.5}

計算2. 回転行列を適用します

$ \begin{pmatrix} 0 & -1 \\ 1 & 0 \end{pmatrix} \binom{x - 0.5}{y - 0.5} = \binom{-y + 0.5}{x - 0.5}

計算3. (0.5, 0.5)を足す

$ \binom{-y + 0.5}{x - 0.5} + \binom{0.5}{0.5} = \binom{1 -y}{x}

結果

以下のようなノードを組むことで、90°回転が実現できます。

https://gyazo.com/dcd3d9b0c2af1ae34daf87c7a6acf52f